<template>
  <div class="searchPage">
    <van-search
        v-model="valuekey"
        shape="round"
        background="white"
        placeholder="请输入搜索关键词"
        @keydown.enter="changeCordList"
    />

      <div class="hotSearch">
        <p>热搜榜单：</p>
        <ul>
          <li  v-show="index<5" v-for="(item,index) in searchContent()" :key="index">
            <router-link :to="{name:'/DetailsNews', query:{ articleId: item.articleId }}">
              <span :class="{red:index<3}">{{ index + 1 }} </span> {{ item.title }}
            </router-link>
          </li>
        </ul>
      </div>
      <van-cell />
      <!-- 搜索历史 -->
      <div class="hostroyIcon">历史记录: <span ><van-icon name="delete" @click="deleteHostroy" /></span></div>
         <div class="hostoryCord">
          <span v-for="(list,index) in cordList" :key="index" @click="changeSearch(list)">{{list}} </span>
        </div>
  </div>
</template>

<script>
import {getHotList} from "@/api/index.api";
export default {
  name: "SearchPage",
  data() {
    return {
      valuekey: "",
      isShowDisplay: true,
      historyList: [],//搜索历史
      hotSearchList: [],
      pageSize: 5,
      cordList:[],
    }
  },
  methods: {
    clearHistory() {
      this.historyList.length = []
      console.log(this.historyList)
    },
    //搜索
    searchContent() {
      this.pageSize=400
      return this.hotSearchList.filter(e => e.content.includes(this.valuekey))
    },
    getHotList() {
      getHotList(1, this.pageSize).then(res => {
        console.log(res.rows)
        if (res.code === 0) {
          this.hotSearchList = res.rows
          this.searchList = res.rows
        } else {
          this.$toast(res)
        }
      })
    },
   changeCordList(){
    
     this.cordList.push(this.valuekey)
     localStorage.cordList=JSON.stringify(this.cordList)
     this.valuekey=""
   },
   changeSearch(data){
     this.valuekey=data
   },
   deleteHostroy(){
    this.cordList=""
    localStorage.clear(localStorage.cordList)
   }
  },
  created() {
    if (!this.isShowDisplay) {
      this.clearHistory()
    }
    this.getHotList()
    if(localStorage.cordList){
      this.cordList=JSON.parse(localStorage.cordList)
    }
  },
  watch: {
    historyList(e) {
      console.log(e)
    },
  }
}
</script>
<style lang="less" scoped>
.searchPage {
  height: 600px;
  padding: 10px 0 60px 0;
  background-color: white;

  .hotSearch {
    overflow: auto;
    width: 92%;
    margin: auto;
    p {
      padding-left: 10px;
    }
    ul {
      height: 100%;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      font-size: 14px;
      //border-top: 1px solid  #fa946d;
      .red {
        color:  red;
        font-weight: 600;
      }
      li {
        height: 30px;
        width: 100%;
        padding: 4px 10px;
        line-height: 30px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border-bottom: 1px solid  #dddada;
        a {
          color: rgb(15, 19, 20);
        }
        span {
          display: inline-block;
          width: 40px;
          text-align: center;
        }

      }
    }
  }
}
.displayShow{
  display: none;
}
.van-cell{
  color: red;
}
.hostoryCord{
  padding:  10px;

  span{

    font-size: 14px;
    margin: 2px 0;
    background-color: rgb(245, 239, 239);
    padding:2px 5px;
    margin: 10px;
    text-align: center;
    border-radius: 10px;
  }
}
.hostroyIcon{
  padding:6px 22px;
  position: relative;
  font-size: 14px;
  font-weight: 600;
      span{
        position: absolute;
        right: 10%;
        font-size: 20px;
        

      }
}  
</style>